<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SpendSmart</title>
    <link rel="stylesheet" href="A1.css" />
  </head>
  <body onload="main();">
    <h1>SpendSmart</h1>
    <nav>
      <ul>
        <li><span href="#" onclick="showTab('Display')">Expense List</span></li>
        <li><span href="#" onclick="showTab('Add')">ADD Expense</span></li>
        <li>
          <span href="#" onclick="showTab('Update')">Update Expense</span>
        </li>
        <li>
          <span href="#" onclick="showTab('Delete')">Delete Expense</span>
        </li>
      </ul>
    </nav>

    <div id="FilterForm">
      <div>
        <form class="form-inline">
          <div id="categoryList">
            <input
              type="text"
              id="categoryFilter"
              placeholder="Filter by category"
              readonly
            />
            <label class="control-label checkbox inline" style="margin-left: 20px;"
              ><input type="checkbox" value="Food & Dining" />Food &
              Dining</label
            >
            <label class="control-label checkbox inline"
              ><input type="checkbox" value="Housing" />Housing</label
            >
            <label class="control-label checkbox inline"
              ><input type="checkbox" value="Digital Products" />Digital
              Products</label
            >
            <label class="control-label checkbox inline"
              ><input
                type="checkbox"
                value="Transportation"
              />Transportation</label
            >
            <label class="control-label checkbox inline"
              ><input type="checkbox" value="Children's Expenses" />Children's
              Expenses</label
            >
          </div>
        </form>

        <button onclick="filterByCategory()" class="btn btn-primary">
          Apply
        </button>
        <button onclick="resetCategory()" class="btn btn-inverse">Reset</button>
      </div>
    </div>

    <div id="container">
      <div id="Add">
        <h2>ADD Expense</h2>
        <div class="form"></div>
        <div>
          <p class="Addresult"></p>
        </div>
      </div>
      <div id="Update">
        <h2>Update Expense</h2>
        <div class="form"></div>
        <div>
          <p class="Updateresult"></p>
        </div>
      </div>

      <div id="Delete">
        <h2>Delete Expense</h2>
        <div class="form">
          <div></div>
        </div>

        <div>
          <p class="Deleteresult"></p>
        </div>
      </div>
      <div id="ADDorUpdateForm">
        <form class="form-horizontal">
          <div class="control-group">
            <span class="serial-number">
              <label class="control-label" for="serialNumber"
                >SerialNumber</label
              >
              <div class="controls"><span id="serialNumber"></span></div>
            </span>
          </div>
          <div class="control-group">
            <label class="control-label" for="title">Title</label>
            <div class="controls">
              <input
                type="text"
                id="title"
                placeholder="Input Title"
                required
                name="Title"
              />
            </div>
          </div>

          <div class="control-group">
            <label class="control-label" for="description">Description</label>
            <div class="controls">
              <input
                type="text"
                id="description"
                placeholder="Input Description"
                required
                name="Description"
              />
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="amount">Amount</label>
            <div class="controls">
              <input
                type="number"
                id="amount"
                placeholder="Input Amount"
                required
                name="Amount"
              />
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="category">Category</label>
            <div class="controls">
              <select name="Category">
                <option value="Food & Dining">Food & Dining</option>
                <option value="Housing">Housing</option>
                <option value="Digital Products">Digital Products</option>
                <option value="Transportation">Transportation</option>
                <option value="Children's Expenses">Children's Expenses</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" class="control-label" for="date"
              >Date</label
            >
            <div class="controls">
              <input
                type="text"
                id="date"
                required
                name="Date"
                placeholder="YYYY-MM-DD"
              />
            </div>
          </div>

          <input
            type="button"
            id="add-submit"
            class="btn btn-primary"
            value="Submit"
          />
        </form>
      </div>
      <div id="Display">
        <h2>Expense List</h2>
        <!-- Q4: Code to display the expenses.
                    Modify the table body from Javascript, as taught in lecture.  -->
        <table class="table table-striped">
          <thead>
            <th style="width: 120px">SerialNumber</th>
            <th>Title</th>
            <th>Description</th>
            <th>Amount</th>
            <th>Category</th>
            <th>Date</th>
            <th class="action">action</th>
          </thead>
          <tbody id="displayTable"></tbody>
        </table>
      </div>
    </div>
    <script src="A1.js"></script>
  </body>
</html>
